<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title></title>
 <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="/assets/fonts/line-icons.css">
 <link href="/assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link href="/assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link href="/assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
 <link rel="stylesheet" type="text/css" href="/assets/css/responsive.css">
 <style>
  * {
   box-sizing: border-box;
  }

  .cart-container {
   margin: 100px auto;
   width: 990px;
  }

  #title {
   width: 100px;
   color: #c81623;
   padding: 10px 0px;
   margin: 0;
   border-bottom: 1px solid #c81623;
  }

  #cart {
   width: 990px;
   border: 1px solid #d9d9d9;
   border-collapse: collapse;
  }

  #cart th,
  #cart td {
   height: 80px;
   border-bottom: 1px solid #d9d9d9;
   text-align: center;

  }

  #cart th {
   background: #d9d9d9;
  }

  #cart td:nth-of-type(1) {
   width: 60px;
   text-align: center;
  }

  #cart td:nth-of-type(2) {
   width: 400px;
  }

  #cart td:nth-of-type(3) {
   width: 80px;
   text-align: right;
  }

  #cart td:nth-of-type(4) {
   width: 250px;
   padding: 0 80px;
  }

  #cart td:nth-of-type(5) {
   width: 80px;
   text-align: right;
  }

  #cart td:nth-of-type(6) {
   /* width: 80px; */
   text-align: center;
  }

  #cart td:nth-of-type(4) button,
  #cart td:nth-of-type(4) input {
   display: block;
   float: left;
   height: 25px;
   border: 1px solid #d9d9d9;
  }

  #cart td:nth-of-type(4) button {
   width: 20px;
   background-color: #fff;
  }

  #cart td:nth-of-type(4) input {
   padding: 0;
   border-width: 1px;
   border-left: none;
   border-right: none;
   width: 50px;
   outline: none;
   text-align: center;
  }

  #cart td:nth-of-type(4) input:focus {
   background-color: #f1f1f1;
  }

  #cart td a {
   text-decoration: none;
   color: #333333;
  }

  #cart td a:hover {
   color: #c81623;
  }
 </style>

</head>
<body>
 <div class="header-container">
 <!-- 购物车标题+商品数量 -->
 <h4 id="card-title">商品选择<span id="number"></span></h4>
 <div class="card-body">
 <!-- 购物车表格 -->
  <div class="table-responsive">
     <table id="datatable" class="table table-bordered">
      <tr>
       <th>商品编号</th>
       <th>库存</th>
       <th>商品名称</th>
       <th>商品价格</th>
       <th>购买数量</th>
       <th>小计</th>
       <th>选购</th>
      </tr>
         <tr th:each="t,line : ${ commodities }">
             <td th:text="${ t.id }"></td>
             <td th:text="${ t.getStock() }"></td>
             <td th:text="${ t.getCdyName() }"></td>
             <td>￥<span name="price" th:text="${ t.getPrice() }"></span></td>
             <td>
              <button name="minus" disabled class="">-</button>
              <input type="text" name="count" value="0" class="">
              <button name="add" >+</button>
             </td>
             <td>￥<span name="subtotal"></span></td>
             <td th:id="${t.id }">
              <a class="buy" href="javascript:void (0)">选购</a>
             </td>
         </tr>
    </table>
 </div>
<!-- 结算 -->
</div>
</div>
<script th:inline="javascript" type="text/javascript">
 // 获取到购物车中所有加按钮
 var addButtons = document.getElementsByName('add')
 var minusButtons = document.getElementsByName('minus')
 console.log(minusButtons)
 // 事件的绑定 -> 每次只能绑定一个元素

 for (var i = 0; i < addButtons.length; i++) {
  var addButton = addButtons[i]
  // 绑定鼠标事件
  // 修改数量

  addButton.onclick = function (event) {
   console.log('click')

   /*
   通过event对象获取用户点击的是哪个按钮
   * 绑定事件的元素 -> 所有的<botton name='add'>+</botton>
   * 触发事件的元素 -> 只能有一个
*/
   // console.log(event.currentTarget, event.target, this)
   var targetButton = event.target
   // 操作与之关联的input元素
   var inputElement = targetButton.previousSibling.previousSibling
   // console.log(inputElement)
   // 获取数量（string类型）
   var count = Number(inputElement.value)
   // 计算
   count += 1
   // 将值更新到页面
   inputElement.value = count
   // 操作与之关联的减按钮
   var minuButton = inputElement.previousSibling.previousSibling
   if (count > 0) {
    minuButton.removeAttribute('disabled')
   } else {
    minuButton.setAttribute('disabled', 'disabled')
   }
   // 更新与之关联的小计
   // 获取单价
   var btnTdElement = targetButton.parentNode
   var priTdElement = btnTdElement.previousSibling.previousSibling

   var priceElement = priTdElement.childNodes[1]
   var price = parseFloat(priceElement.firstChild.nodeValue)
   var subtotal = price *= count
   //记录小计
   localStorage.subtotal =subtotal;
   localStorage.count =count;


   if (String(subtotal).indexOf('.') === -1) {
    subtotal = subtotal + '.00'
   }
   var subTdElement = btnTdElement.nextSibling.nextSibling
   var subtotalElement = subTdElement.childNodes[1]
   subtotalElement.textContent = subtotal
   // console.log(price)

   // 复选框
   var trElement = btnTdElement.parentNode
   var checkTdElement = trElement.childNodes[1]
   var checkboxElement = checkTdElement.firstChild
   checkboxElement.setAttribute('checked', 'checked')

   // 将当前这一行的背景颜色修改 #fff4e8
   trElement.style.backgroundColor = '#fff4e8'

  }
 }
 for (var i = 0; i < minusButtons.length; i++) {
  var minusButton = minusButtons[i]
  minusButton.onclick = function (event) {
   var targetButton = event.target
   // 操作与之关联的input元素
   var inputElement = targetButton.nextSibling.nextSibling
   console.log(inputElement)
   // 获取数量（string类型）
   var count = Number(inputElement.value)
   // 计算
   count -= 1
   // 将值更新到页面
   inputElement.value = count


   // 计算小计
   var btnTdElement = targetButton.parentNode
   var priTdElement = btnTdElement.previousSibling.previousSibling

   var priceElement = priTdElement.childNodes[1]
   var price = parseFloat(priceElement.firstChild.nodeValue)
   var subtotal = price *= count
   if (String(subtotal).indexOf('.') === -1) {
    subtotal = subtotal + '.00'
   }
   var subTdElement = btnTdElement.nextSibling.nextSibling
   var subtotalElement = subTdElement.childNodes[1]
   subtotalElement.textContent = subtotal
   // console.log(price)

   // 操作减按钮
   if (count <= 1) {
    targetButton.setAttribute('disabled', 'disabled')
    // 复选框
    var trElement = btnTdElement.parentNode
    var checkTdElement = trElement.childNodes[1]
    var checkboxElement = checkTdElement.firstChild
    checkboxElement.removeAttribute('checked')
    // 将当前这一行的背景颜色修改 #fff4e8
    trElement.style.backgroundColor = 'white'
   }

  }
 }
</script>

<script type="text/javascript" th:inline="javascript">

 // 选购
 $(".buy").bind("click",function () {
  var subtotal = localStorage.getItem('subtotal');
  var id =  $(this).parent().attr("id");
  var count = localStorage.getItem('count');
  alert(count)
  alert(subtotal);
  alert(id);
  window.open("http://127.0.0.1:8080/alipay?"+"&subtotal="+subtotal+"&id="+id+"&count="+count);
 })


</script>


<script src="/assets/js/jquery-min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.app.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables/buttons.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables/jszip.min.js"></script>
<script src="/assets/plugins/datatables/pdfmake.min.js"></script>
<script src="/assets/plugins/datatables/vfs_fonts.js"></script>
<script src="/assets/plugins/datatables/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables/buttons.print.min.js"></script>
<script src="/assets/plugins/datatables/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables/responsive.bootstrap4.min.js"></script>
</body>
</html>